<template>
  <div id="home">
    <nav-bar class="home-nav">
      <template #center> 购物街 </template>
    </nav-bar>
    <scroll
      class="content"
      ref="scrolls"
      :probeType="2"
      :pullUpLoad="true"
      @scroll="contentScroll"
      @pullingUp="loadMore"
    >
      <home-swiper :banner="banner"></home-swiper>
      <home-recommend :recommends="recommends"></home-recommend>
      <home-fashion></home-fashion>
      <tab-control
        :titles="['流行', '新款', '精选']"
        @tabClick="tabClick"
      ></tab-control>
      <goods-list :goods="goodss"></goods-list>
    </scroll>
    <back-top v-show="isShow" @click.native="goBack"></back-top>
  </div>
</template>

<script>
import { getHome, getHomeGoods } from "@/api/home";

import navBar from "@/components/common/navbar/navbar.vue";
import TabControl from "@/components/content/tabControl/tabControl.vue";
import GoodsList from "@/components/content/goods/goodsList.vue";
import Scroll from "@/components/common/scroll/scroll.vue";
import backTop from "@/components/content/backtop/backTop.vue";

import HomeSwiper from "./homeComponents/homeSwiper.vue";
import HomeRecommend from "./homeComponents/homeRecommend.vue";
import HomeFashion from "./homeComponents/homeFashion.vue";

export default {
  components: {
    navBar,
    HomeSwiper,
    HomeRecommend,
    HomeFashion,
    TabControl,
    GoodsList,
    Scroll,
    backTop,
  },
  data() {
    return {
      banner: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      goodss: [],
      currentType: "流行",
      isShow: false,
    };
  },
  mounted() {
    this.getHome();
    // this.getHomeGoods("pop");
    // this.getHomeGoods("new");
    // this.getHomeGoods("sell");

    this.getHomeGoods();

    this.$bus.$on("itemImgLoad", () => {
      this.$refs.scrolls.refresh();
    });
  },
  methods: {
    getHome() {
      getHome().then((res) => {
        this.banner = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },
    // 实际数据
    // getHomeGoods(type) {
    //   let page = this.goods[type].page + 1;
    //   getHomeGoods1(type, page).then((res) => {
    //     this.goods[type].list.push(...res.data.list);
    //     this.goods[type].page += 1;
    // this.$refs.scrolls.finsihPullUp();
    //   });
    // },
    // mock数据
    getHomeGoods() {
      getHomeGoods().then((res) => {
        console.log(res);
        this.goodss = res.data.data.list;
      });
    },

    tabClick(i) {
      switch (i) {
        case 0:
          this.currentType = "流行";
          break;
        case 1:
          this.currentType = "新款";
          break;
        case 2:
          this.currentType = "精选";
          break;
        default:
          break;
      }
    },

    goBack() {
      this.$refs.scrolls.scrollTo(0, 0);
    },

    contentScroll(val) {
      this.isShow = -val.y > 600;
    },

    loadMore() {
      console.log("loading");
      // 实际数据
      // this.getHomeGoods(this.currentType)
      // this.$refs.scrolls.refresh();
    },
  },
};
</script>

<style scoped>
#home {
  height: 100vh;
  position: relative;
}
.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}
.tab-control {
  position: sticky;
  top: 40px;
  z-index: 99;
}
.content {
  /* height: calc(100% - 93px); */
  overflow: hidden;
  position: absolute;
  top: 3px;
  bottom: 40px;
  left: 0;
  top: 0;
}
</style>
